const recommend = [
  {
    src: "./uploads/recommend_01.jpg",
    h4: "我独自盗墓",
    p: "都市",
  },
  {
    src: "./uploads/recommend_02.jpg",
    h4: "爷就是开挂少女",
    p: "西幻",
  },
  {
    src: "./uploads/recommend_03.jpg",
    h4: "从1级开始的异世...",
    p: "古风",
  },
  {
    src: "./uploads/recommend_04.jpg",
    h4: "骷髅奶爸",
    p: "竞技",
  },
  {
    src: "./uploads/recommend_05.jpg",
    h4: "修罗武神",
    p: "西幻",
  },
  {
    src: "./uploads/recommend_06.jpg",
    h4: "垃圾堆里的皇女",
    p: "玄幻",
  },
  {
    src: "./uploads/recommend_07.jpg",
    h4: "无法升级的玩家",
    p: "西幻",
  },
  {
    src: "./uploads/recommend_08.jpg",
    h4: "最强王者",
    p: "都市",
  },
  {
    src: "./uploads/recommend_09.jpg",
    h4: "真理面具",
    p: "悬疑",
  },
  {
    src: "./uploads/recommend_10.jpg",
    h4: "桃花照玉案",
    p: "竞技",
  },
  {
    src: "./uploads/recommend_11.jpg",
    h4: "黑化王爷超难...",
    p: "古风",
  },
  {
    src: "./uploads/recommend_12.jpg",
    h4: "双胞胎兄弟的父...",
    p: "西幻",
  },
];

const list = (document.querySelector(".list").innerHTML = recommend
  .map((item) => {
    return `
            <li>
                    <a href="#">
                        <img src="${item.src}" alt="">
                        <h4>${item.h4}</h4>
                        <p>${item.p}</p>
                    </a>
                </li>
  `;
  })
  .join(""));

const hot = [
  {
    src: "./uploads/hot_01.png",
    h4: "鬼灭之刃",
    p: "热血",
  },
  {
    src: "./uploads/hot_02.png",
    h4: "MIX",
    p: "西幻",
  },
  {
    src: "./uploads/hot_03.jpg",
    h4: "海猫鸣",
    p: "热血",
  },
  {
    src: "./uploads/hot_04.jpg",
    h4: "海猫鸣",
    p: "热血",
  },
  {
    src: "./uploads/hot_05.jpg",
    h4: "海猫鸣",
    p: "热血",
  },
  {
    src: "./uploads/hot_06.png",
    h4: "犬夜叉",
    p: "玄幻",
  },
  {
    src: "./uploads/hot_07.png",
    h4: "机动奥特曼",
    p: "奇幻",
  },
  {
    src: "./uploads/hot_08.png",
    h4: "乱马",
    p: "都市",
  },
];

const lists = (document.querySelector(".lists").innerHTML = hot
  .map((item) => {
    return `
            <li>
                    <a href="#">
                        <img src="${item.src}" alt="">
                        <h4>${item.h4}</h4>
                        <p>${item.p}</p>
                    </a>
                </li>
  `;
  })
  .join(""));

// banner
// 第一部分.轮播图
// 1.1 获取元素
const btnLeft = document.querySelector(".banner .arrow_left");
const btnRight = document.querySelector(".banner .arrow_right");
const Ulist = document.querySelectorAll(".banner li");
const img = document.querySelectorAll(".banner li img");
console.log(Ulist);
const container = document.querySelector(".container");

// 1.2 定义数据
const bannerData = [
  "./uploads/banner_01.jpg",
  "./uploads/banner_02.jpg",
  "./uploads/banner_03.jpg",
];
// console.log(imgs);
T()
function T () {
  let i = 0;
let timerId = setInterval(function () {
  img[0].src = bannerData[i];
  i++;
  if (i > 2) i = 0;
}, 1500);
let j = 1;
timerId = setInterval(function () {
  img[1].src = bannerData[j];
  j++;
  if (j > 2) j = 0;
}, 1500);

let k = 2;
timerId = setInterval(function () {
  img[2].src = bannerData[k];
  k++;
  if (k > 2) k = 0;
}, 1500);
}

// 1.3 点击按钮轮播

// 左侧按钮事件
// btnLeft.addEventListener("click", function () {
//   i -= 1;
//   j -= 1;
//   k -= 1;
//   if (i === 0) i = 2;
//   if (j === 0) j = 2;
//   if (k === 0) k = 2;
//   T()
// });

// 右侧按钮
// btnRight.addEventListener("click", function () {});
